<template>
	<view>
		<view class="wrap-live" :style="{width:windowsW, height: windowsH}">
			<l-svga class="svga" :style="{height: windowsH}" ref="svga"></l-svga>
			
			<topHead />
			
			<view class="zw"></view>
			
			<chatList />
			
			<pusherBottom v-if="liveType == 1" />
			<playerBottom v-if="liveType == 2" />
		</view>
		
		<more />
		<giftRecord />
		<report />
		<userInfo />
		<apply />
		<invite />
		<giftList />
		<liveUserList />
		<liveGoodsList />
		<zbApplyYHLM />
		<wallet />
	</view>
</template>

<script>
	import topHead from "./liveTop.vue";
	import chatList from "./liveChatList.vue";
	import pusherBottom from "./pusherBottom.vue";
	import playerBottom from "./playerBottom.vue";
	import more from "@/components/more/more.vue"; //更多
	import giftRecord from "@/components/giftRecords/giftRecords.vue"; //打赏记录
	import report from "@/components/report/report.vue"; //举报
	import userInfo from "@/components/userInfo/userInfo.vue"; //用户信息
	import apply from "@/components/applyLMList/applyLMList.vue"; //连麦申请
	import invite from "@/components/inviteLMList/inviteLMList.vue"; //邀请连麦列表
	import giftList from "@/components/giftList/giftList.vue"; //礼物列表
	import liveUserList from "@/components/liveUserList/liveUserList.vue"; //在线观众
	import liveGoodsList from "@/components/liveGoodsList/liveGoodsList.vue"; //商品列表
	import zbApplyYHLM from "@/components/zbApplyYHLM/zbApplyYHLM.vue"; //主播邀请用户连麦
	import wallet from "@/components/wallet/wallet.vue"; //钱包
	
	export default {
		components: {
			topHead,
			chatList,
			pusherBottom,
			playerBottom,
			more,
			giftRecord,
			userInfo,
			report,
			apply,
			invite,
			giftList,
			liveUserList,
			liveGoodsList,
			wallet
		},
		props: {
			/**
			 * 直播类型 1-直播 2-看播
			 */
			liveType: { 
				type: String,
				default: 0
			}
		},
		data() {
			return {
				windowsW: uni.getSystemInfoSync()["windowWidth"],
				windowsH: uni.getSystemInfoSync()["windowHeight"],
				
				svgaList: [], //svga数组
				isPlaying: false, //是否正在播放svga 
			}
		},
		mounted() {
			//送礼物
			uni.$on("sendGiftDM", (data) => {
				this.svgaList.push(data)
				if (this.isPlaying == false) {
					this.isPlaying = true
					this.playGiftSvgaData()
				}
			})
		},
		methods: {
			/**
			 * 播放礼物图片
			 */
			playGiftSvgaData() {
				let svgaURL = this.svgaList[0].gift.svgfile
				this.$refs.svga.render(async (parser, player) => {
				    const videoItem = await parser.load(svgaURL);
				    await player.setVideoItem(videoItem);
				    // 设置当前动画的循环次数，0代表无限循环 默认 0
				    player.loops = 1
				    // 开始播放动画，reverse = true 时则反向播放。
				    player.startAnimation()
				    // 监听动画完成
				    player.onFinished(() => {
				        console.log('动画结束')
						this.svgaList.splice(0, 1)
						if (this.svgaList.length > 0) {
							this.playGiftSvgaData()
						} else {
							this.isPlaying = false
						}
				    })
				})
			},
		},
	}
</script>

<style scoped>
	.svga {
		position: absolute;
		left: 0;
		top: 0;
		width: 750rpx;
	}
	.wrap-live {
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		/* background-color: transparent; */
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.zw {
		flex: 1;
		width: 750rpx;
		background-color: transparent;
	}
	
	
</style>